<template>
  <div class="inner">

    <van-nav-bar
      safe-area-inset-top
      right-text="登录"
      fixed
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
      <van-icon name="coupon-o" size="1rem"/> 果汁
      </template>

      <template #title>
        <van-icon name="search" size="1rem" @click="titleClick"/>
      </template>

      <template #right v-if="logined">
        <van-icon name="user-o" size="1rem" />
      </template>
    </van-nav-bar>

    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" title="展览"/>
      </van-swipe-item>
    </van-swipe>

   <van-grid :column-num="4">
      <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
  </van-grid>
  
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />   
        <goods-list :goods="goods" :size="imgSize" />
        <goods-list :goods="goods" :size="imgSize" />

  </div>
</template>

<script>

import GoodsList from '../components/GoodsList.vue';
// import wy from '@/assets/wy.json';
import { getLocal } from '/@//utils/storage.js'
import { wid } from '/@//utils/hit.js'

import { computed, ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    GoodsList
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const active = ref(0)
    const imgSize = ref([175, 175])
    const w = wid(175)
    
    imgSize.value = [w, w]
    console.log("哈哈哈哈", getLocal("token"))
    
    const logined = ref(false)

    const images = computed(() => {
      return store.state.images
    })

    const goods = computed(() => {
      return store.state.goods
    })

    const value = computed(() => {
      return store.state.searchValue
    }) 

    const onClickRight = () => {
      let has = "/user";
      let hasNo = "/login"

      logined.value = getLocal("token") ? true : false

      if(logined.value) {
        router.push({
          path: has
        })
      } else {
        router.push({
          path: hasNo
        })
      }
    };
    const titleClick = () => {
      router.push({
        path: "/search"
      })
    }

    onMounted(() => {
      window.addEventListener("resize", () => {
          let w1 = wid(175)
          imgSize.value = [w1, w1]
      })
    })
    const TopBar = {titleClick, logined, onClickRight }


    return { ...TopBar, images, goods, value, active, imgSize };
  },
  methods: {
    onClickCard(e) {
      // this.$router.push('/home/aaa');
      if (e.target) { // 由于 e.target 可能为 null，所以需要判断一下
        console.log(e.target);
      }
    },
    onClickLeft(e) {
      // this.$router.push('/home/aaa');
      if (e.target) { // 由于 e.target 可能为 null，所以需要判断一下
        console.log(e.target);
      }
    }
  }
}

console.log(import.meta.env);
console.log(import.meta.env.MODE);
console.log(import.meta.env.VITE_API_URL);
</script>

<style lang="less" scoped>
  .inner {
    padding-bottom:var(--van-nav-bar-height);
  }

  .van-nav-bar {
    // background-color: #beb0ac;
    box-shadow: 0.5px 0.5px 0.5px grey;
    padding-bottom: 4px;
  }

  .van-swipe {
    margin-top: 45px;
  }

  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .van-swipe-item img {
    position:relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 240px;
    // padding: 30px 60px;
    pointer-events: none;
  }

  hr {
    box-shadow: 0 0 5px #888888
  }
</style>
